<template>
  <a-modal
    :title="dialogTile"
    :width="1000"
    :confirm-loading="confirmloading"
    :mask-closable="false"
    :destroy-on-close="true"
    v-model="dialogVisible"
    @ok="confirmBtn"
    @cancel="handleCancel"
  >
    <a-form-model layout="inline" :model="queryParam">
      <a-form-model-item ref="name" label="商品名称" prop="name">
        <a-input v-model="queryParam.name" placeholder="请输入商品名称" allow-clear />
      </a-form-model-item>
      <a-form-model-item ref="cat_id" label="商品分类" prop="cat_id">
        <a-cascader
          :options="catList"
          @change="changeCat"
          :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
          placeholder="请选择商品分类"
          allow-clear
        />
      </a-form-model-item>
      <a-form-model-item ref="supplier_id" label="供货商" prop="supplier_id">
        <a-select v-model="queryParam.supplier_id" allowClear>
          <a-select-option :value="0">全部</a-select-option>
          <a-select-option v-for="(item, index) in supplier_list" :key="item.id" :value="item.id">
            {{ item.supplier_name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="searchData"> 查询 </a-button>
      </a-form-model-item>
    </a-form-model>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-radio-group v-model="queryParam.status" @change="callback">
          <a-radio-button :value="-1">全部 </a-radio-button>
          <a-radio-button :value="1">上架中 </a-radio-button>
          <a-radio-button :value="0">已下架 </a-radio-button>
        </a-radio-group>
      </div>
      <div>
        <!-- 商品列表 -->
        <a-table
          style="width: 100%; overflow-x: auto"
          v-if="columns.length"
          ref="tableList"
          :columns="columns"
          :data-source="dataSource"
          :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
          :row-key="(record) => record.id"
          :pagination="{
            total: this.totalCount,
            current: this.pageNo,
            showSizeChanger: true,
            onChange: this.tablePageChange,
            onShowSizeChange: this.paginationSizeChange,
          }"
          :loading="loading"
        >
          <template slot="goods_name" slot-scope="text, goods">
            <div class="goods-info">
              <img class="goods-pic" :src="goods.cover_pic" alt="" />
              <div class="info-box">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span class="goods-name">{{ goods.name }} </span>
                  </template>
                  <div style="font-weight: bold; line-height: 25px; width: 160px" class="of_el">
                    {{ goods.name }}
                  </div>
                </a-tooltip>
                <div style="color: rgb(140, 140, 140); width: 160px" class="of_el">
                  {{ goods.cat ? goods.cat.map((item) => item.name).join() : '暂无分类' }}
                </div>
              </div>
            </div>
          </template>
          <template slot="supplier" slot-scope="text">
            <div class="goods-info" v-if="text.supplier_name">
              <img class="goods-pic" :src="text.supplier_logo" alt="" />
              <div class="info-box">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span class="goods-name">{{ text.supplier_name }} </span>
                  </template>
                  <div style="font-weight: bold; line-height: 25px; width: 80px" class="of_el">
                    {{ text.supplier_name }}
                  </div>
                </a-tooltip>
                <!-- <div style="color: rgb(140, 140, 140); width: 160px" class="of_el">
                    {{ text.supplier_phone }}
                  </div> -->
              </div>
            </div>
            <template v-else>暂无供货商</template>
          </template>
        </a-table>
      </div>
    </a-card>
  </a-modal>
</template>
  
  <script>
import { list } from '@/api/goods/goods'
import { list as catListApi } from '@/api/goods/cat'
import { supplierList } from '@/api/purchase/purchase'
export default {
  name: 'pool-list-add-or-edit-product-list',
  data() {
    return {
      dialogTile: '商品列表',
      dialogVisible: false,
      confirmloading: false,

      columns: [
        {
          title: '商品ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '产品名称',
          dataIndex: 'name',
          key: 'name',
          width: 150,
          scopedSlots: { customRender: 'goods_name' },
        },
        {
          title: '供货商信息',
          width: 110,
          scopedSlots: { customRender: 'supplier' },
        },
        {
          title: '售价',
          dataIndex: 'price',
          key: 'price',
          defaultSortOrder: '',
          sorter: (a, b) => a.price - b.price,
        },
        {
          title: '库存',
          dataIndex: 'goods_num',
          key: 'goods_num',
          defaultSortOrder: '',
          sorter: (a, b) => a.goods_num - b.goods_num,
        },
        {
          title: '虚拟销量',
          dataIndex: 'virtual_sales',
          key: 'virtual_sales',
          defaultSortOrder: '',
          sorter: (a, b) => a.virtual_sales - b.virtual_sales,
        },
      ],

      catList: [],
      supplier_list: [],
      queryParam: {
        name: '',
        cat_id: 0,
        status: -1,
        supplier_id: 0,
      },

      loading: false,
      dataSource: [],
      totalCount: 0,
      pageNo: 1,
      pageSize: 10,

      queryName: '',
      selectedRowKeys: [],
      canAction: true,
      goods_ids: [],
    }
  },
  created() {
    this.getCatList()
    this.supplierList()
  },
  methods: {
    handleShow(name, goods_ids, canAction) {
      this.pageNo = 1
      this.getGoodsData()
      this.canAction = canAction
      this.queryName = name
      if (goods_ids) {
        this.goods_ids = goods_ids
        this.selectedRowKeys = goods_ids //若已存在选中项 反显
      } else {
        this.goods_ids = []
        this.selectedRowKeys = []
      }
      this.dialogVisible = true
    },
    handleCancel() {
      this.goods_ids = []
      this.selectedRowKeys = []
      this.dialogVisible = false
    },
    searchData() {
      this.pageNo = 1
      this.getGoodsData()
    },
    // 商品列表
    async getGoodsData() {
      var newObj = {}
      newObj = { ...this.queryParam, pageNo: this.pageNo, pageSize: this.pageSize }
      this.loading = true
      const res = await list(newObj)
      this.loading = false
      if (!res.code) {
        this.dataSource = res.data.data
        this.totalCount = res.data.totalCount
      }
    },
    tablePageChange(e) {
      this.pageNo = e
      this.getGoodsData()
    },
    paginationSizeChange(current, size) {
      this.pageNo = current
      this.pageSize = size
      this.getGoodsData()
    },
    onSelectChange(selectedRowKeys) {
      if (!this.canAction) {
        this.selectedRowKeys = this.goods_ids
      } else {
        this.selectedRowKeys = selectedRowKeys //选中项
      }
    },
    // 商品分类列表
    getCatList() {
      catListApi({ is_show: -1 }).then((res) => {
        this.catList = res.data.list
      })
    },
    changeCat(val) {
      this.queryParam.cat_id = val[val.length - 1]
    },
    // 供应商列表
    async supplierList() {
      const res = await supplierList({ limit: 50, page: 1 })
      if (res.code === 0) {
        this.supplier_list = res.data.list
      }
    },
    callback(e) {
      this.queryParam.status = e.target.value
      this.getGoodsData()
    },
    // 提交选中项
    confirmBtn() {
      this.confirmloading = true
      this.$emit('getGoodsIds', this.queryName, this.selectedRowKeys) //选中项提交到父级页面
      setTimeout(() => {
        this.confirmloading = false
        this.selectedRowKeys = []
        this.dialogVisible = false
      }, 300)
    },
  },
}
</script>

<style lang="less" scoped>
.table-operator {
  margin-top: 10px;
}
/deep/.ant-card-body {
  padding: 0 !important;
}
/deep/.ant-form-item-control-wrapper {
  min-width: 100px !important;
}
/deep/.ant-table-body {
  min-height: 360px;
}
.slotTable {
  /deep/.ant-table-row-cell-break-word {
    padding: 2px 8px !important;
  }
  /deep/.ant-table-body {
    min-height: 0px;
  }
}

/deep/.ant-table-body::-webkit-scrollbar {
  display: none; /*ChromeSafari*/
}

.of_el {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.table_operator_icon {
  font-size: 18px;
  padding: 0 5px;
  color: rgb(182, 182, 182);
  cursor: pointer;
  &:hover {
    color: rgb(24, 144, 255);
  }
}

.goods-info {
  display: flex;
  align-items: flex-start;
  position: relative;
  .goods-pic {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: block;
  }
  .info-box {
    margin-left: 24px;
    margin-right: 5px;
    .goods-name {
      // width: 185px;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .item-edit-box {
    width: 15px;
    height: 100%;
    position: absolute;
    right: -12px;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.goods-price-row {
  position: relative;
  display: inline-block;
  .row-price-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-rest-row {
  position: relative;
  display: inline-block;
  .row-rest-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-virtual-row {
  position: relative;
  display: inline-block;
  .row-virtual-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-type {
  min-width: 60px;
  display: inline-block;
}
.table-action {
  min-width: 93px;
  display: inline-block;
}

.flexBox {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  .inp {
    width: 426px;
    border-radius: 2px 0 0 2px;
  }

  .text {
    width: 42px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #d9d9d9;
    border-radius: 0 2px 2px 0;
    border-left: 0;
    background: #f7f7f7;
  }
}

.formFlex {
  display: flex;
  align-items: center;

  i {
    color: #ff0000;
    font-style: normal;
  }

  span {
    margin-right: 10px;
  }
}
</style>

  